<template>
  <div class="app-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>学生信息</el-breadcrumb-item>
    </el-breadcrumb>
    <h3>学生设置列表</h3>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.name" placeholder="学生姓名"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchObj.number" placeholder="学号"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="selectPage()">查询</el-button>
      <el-button type="success" @click="addInfoDialog=true">添加学生</el-button>
      <el-button type="success" @click="importData">批量添加学生</el-button>
      <el-button type="success" @click="exportData">数据导出</el-button>
    </el-form>

    <!-- 工具条 -->
    <div>
      <el-button type="danger" size="mini" @click="deleteBatchIds()">批量删除</el-button>
    </div>

    <el-table
      :data="list" stripe style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column type="index" width="50" label="序号"/>
      <el-table-column prop="number" label="学号"/>
      <el-table-column prop="password" label="密码"/>
      <el-table-column prop="name" label="姓名"/>
      <el-table-column prop="sex" label="性别"/>
      <el-table-column prop="age" label="年龄"/>
      <el-table-column prop="department" label="学院"/>

      <el-table-column label="操作" width="280" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini"
                     icon="el-icon-edit" @click="showInfo(scope.row.id)">修改
          </el-button>
          <el-button type="danger" size="mini"
                     icon="el-icon-delete" @click="deleteById(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="current"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="selectPage"/>

    <!--添加学生信息对话框-->
    <el-dialog title="添加学生信息" :visible.sync="addInfoDialog" @close="resetInfoDialog">
      <el-form :model="student" ref="student">
        <el-form-item label="学号" :label-width="formLabelWidth" prop="number">
          <el-input v-model="student.number"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="student.password"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="student.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
          <el-input v-model="student.sex"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
          <el-input v-model="student.age"></el-input>
        </el-form-item>
        <el-form-item label="学院" :label-width="formLabelWidth" prop="department">
          <el-input v-model="student.department"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetInfoDialog">取 消</el-button>
        <el-button type="primary" @click="insert()">确 定</el-button>
      </div>
    </el-dialog>

    <!--修改学生信息对话框-->
    <el-dialog title="修改学生信息" :visible.sync="infoDialog" @close="resetInfoDialog">
      <el-form :model="student" ref="student">
        <el-form-item label="学号" :label-width="formLabelWidth" prop="number">
          <el-input v-model="student.number" disabled></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="student.password"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="student.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
          <el-input v-model="student.sex"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
          <el-input v-model="student.age"></el-input>
        </el-form-item>
        <el-form-item label="学院" :label-width="formLabelWidth" prop="department">
          <el-input v-model="student.department"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetInfoDialog">取 消</el-button>
        <el-button type="primary" @click="updateById()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="导入" :visible.sync="dialogImportVisible" width="480px">
      <el-form label-position="right" label-width="170px">

        <el-form-item label="文件">
          <el-upload
            :multiple="false"
            :on-success="onUploadSuccess"
            :action="'http://localhost:9000/student/importData'"
            class="upload-demo">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传xlxs文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogImportVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
//引入接口定义的js文件
import student from '@/api/student'

export default {
  //定义变量和初始值
  data() {
    return {
      current: 1, //当前页
      limit: 5, //每页显示记录数
      searchObj: {}, //条件封装对象
      list: [], //每页数据集合
      total: 0, //总记录数
      multipleSelection: [], // 批量选择中选择的记录列表
      infoDialog: false,//选课信息对话框
      addInfoDialog: false,
      dialogImportVisible: false,
      formLabelWidth: '120px',
      student: {}
    }
  },
  created() { //在页面渲染之前执行
    //一般调用methods定义的方法，得到数据
    this.selectPage()
  },
  methods: {//定义方法，进行请求接口调用
    //获取选择复选框的id值
    handleSelectionChange(selection) {
      this.multipleSelection = selection
    },
    //批量删除
    deleteBatchIds() {
      this.$confirm('此操作将永久删除学生信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { //确定执行then方法
        var idList = []
        //遍历数组得到每个id值，设置到idList里面
        for (var i = 0; i < this.multipleSelection.length; i++) {
          var obj = this.multipleSelection[i]
          var id = obj.id
          idList.push(id)
        }
        //调用接口
        student.removeByIds(idList)
          .then(response => {
            //提示
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            //刷新页面
            this.selectPage(1)
          })
      })
    },
    //学生信息列表
    selectPage(page = 1) { //添加当前页参数
      this.current = page
      student.selectPage(this.current, this.limit, this.searchObj)
        .then(response => { //请求成功response是接口返回数据
          //返回集合赋值list
          this.list = response.data.data.records
          //总记录数
          this.total = response.data.data.total
        })
        .catch(error => {//请求失败
          console.log(error)
        })
    },
    //删除学生的方法
    deleteById(id) {
      this.$confirm('此操作将永久删除学生信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { //确定执行then方法
        //调用接口
        student.removeByIds([id])
          .then(response => {
            //提示
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            //刷新页面
            this.selectPage(1)
          })
      })
    },
    importData() {
      this.dialogImportVisible = true
    },
    onUploadSuccess(response, file) {
      this.$message.info('上传成功')
      this.dialogImportVisible = false
      this.selectPage(1)
    },
    exportData() {
      //直接调用导出接口
      window.open('http://localhost:9000/student/exportData')
    },
    showInfo(id) {
      this.infoDialog = true
      //调用接口
      student.getById(id)
        .then(response => {
          this.student = response.data.data
        })
    },
    resetInfoDialog() {
      //重置信息框
      this.$refs['student'].resetFields()
      this.infoDialog = false
      this.addInfoDialog = false
      this.student = {}
    },
    updateById() {
      student.updateById(this.student)
        .then(response => {
          //提示
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.infoDialog = false
          this.student = {}
          //刷新页面
          this.selectPage(1)
        })
    },
    insert() {
      //调用接口
      student.insert(this.student)
        .then(response => {
          //提示
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          this.addInfoDialog = false
          this.student = {}
          //刷新页面
          this.selectPage(1)
        })
    }
  }
}
</script>
